<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="/js/vue.js"></script>
  <script src="/js/axios.js"></script>
</head>
<body>
<div id="d">
  <h1>{{msg}}</h1>
  <input v-model="userId" placeholder="用户id">
  <input v-model="userName" placeholder="用户名">
  <input v-model="birth" placeholder="生日:2022-5-6"><br>
  <input type="button" @click="getUser" value="获取用户名"><br>
  <input type="button" @click="addUser" value="添加用户"><br>
  <input type="button" @click="modifyUserById" value="修改用户"><br>
  <input type="button" @click="deleteUserById" value="删除用户"><br>
</div>
<script>
  new Vue({
    el:'#d',
    data:{
      userId:'',
      userName:'',
      birth:'',
      msg:''
    },
    methods:{
      getUser(){
        axios.get('http://localhost/system/user',{
          params:{//把参数以？方式拼接到url后面，仅限于get请求
            id:this.userId
          }
        }).then(ret=>{
          var data = ret.data;
          if(data.rs){
            this.msg = '查询到用户名为：'+data.obj.name+",生日："+data.obj.birth
          }else {
            this.msg = data.extra
          }
        });
      },
      addUser(){
        axios.post('http://localhost/system/user',
                {
                  id: this.userId,
                  name: this.userName,
                  birth:this.birth
                }
        ).then(ret=>{
          this.msg=ret.data.rs?"添加成功":"添加失败"
        });
      },
      modifyUserById(){
        axios.put('http://localhost/system/user',
                {
                  id: this.userId,
                  name: this.userName,
                  birthday:this.birth
                }
        ).then(ret=>{
          this.msg=ret.data.rs?ret.data.obj:"修改失败"
        });
      },
      deleteUserById(){
        axios.delete('http://localhost/system/user/'+this.userId,
        ).then(ret=>{
          this.msg=ret.data.rs?"删除成功":"删除失败"
        });
      }
    }
  })
</script>
</body>
</html>